import React, { Component } from 'react';
import { Button, Row, Col } from 'antd';
import { Link } from 'react-router';
import './Disk.less';

export default class Disk extends Component {
  onChange(index) {
    // console.log(index);
  }

  render() {
    return (
      <div className="block-disk">
        <Row className="row-slogan">
          <Col span={24}>
            <img src={require('./../img/banner/2.png')} alt="banner" />
            <article>
              <h3>云硬盘</h3>
              <span>云主机为您提供安全可靠的弹性计算服务。 只需几分钟便可以在云端获取和启用虚机，来实现您的计算需求。随着业务需求的变化，您可以实时扩展或缩减计算资源。按实际使用的资源计费，可以为您节约计算成本。提升运维效率，使您更专注于核心业务创新</span>
              <p>
                <Button size="large" type="primary">立即购买</Button>
                <Button size="large" ghost>管理控制台</Button>
                <Link to='/price/disk'><Button size="large" ghost>产品价格</Button></Link>
              </p>
            </article>
          </Col>
        </Row>

        <div className="wrap-recommend">
          <Row className="row-title">
            <Col span={24}>
              <h5>产品价格</h5>
            </Col>
          </Row>
          <Row className="row-product">
            <Col span={8}>
              <article>
                <h6>SSD云盘</h6>
                <div className="cont">
                  <div className="top">
                    <span>特性：高性能，高可靠，弹性扩容</span>
                    <p>单盘最大容量：32768GiB</p>
                    <p>单盘IOPS性能 ：min{'{'}1200+30*容量，20000{'}'}</p>
                    <p>单盘吞吐性能：min{'{'}80+0.5*容量，300{'}'}MBps</p>
                  </div>
                  <div className="bottom">
                    <p>使用场景</p>
                    <p>I/O密集型应用</p>
                    <p>中大型关系数据库</p>
                    <p>NoSQL数据库</p>
                    <p className="price"><strong>￥ 1元/GB/月</strong></p>
                    <Button type="primary" size="large">价格详情</Button>
                  </div>
                </div>
              </article>
            </Col>
            <Col span={8}>
              <article>
                <h6>HDD本地盘</h6>
                <div className="cont">
                  <div className="top">
                    <span>特性：高吞吐，极低的单位存储成本</span>
                    <p>单盘吞吐：190MBps</p>
                    <p>单机最大吞吐： 5320 MBps</p>
                    <p>单盘容量：5500GiB</p>
                    <p>单机最大容量：154000GiB</p>
                  </div>
                  <div className="bottom">
                    <p>使用场景</p>
                    <p>大数据业务</p>
                    <p>Hadoop离线计算</p>
                    <p className="price"><strong>参考实例价格</strong></p>
                    <Button type="primary" size="large">价格详情</Button>
                  </div>
                </div>
              </article>
            </Col>
            <Col span={8}>
              <article>
                <h6>高效云盘</h6>
                <div className="cont">
                  <div className="top">
                    <span>特性：高可靠，中等性能和价格，弹性扩容</span>
                    <p>单盘最大容量：32768GiB</p>
                    <p>单盘IOPS性能 ：min{'{'}1000+6*容量，3000{'}'}</p>
                    <p>单盘吞吐性能：min{'{'}50+0.1*容量，80{'}'}MBps</p>
                  </div>
                  <div className="bottom">
                    <p>使用场景</p>
                    <p>开发与测试业务</p>
                    <p>小型负载数据库</p>
                    <p>系统盘CPU 4vCPU 16G</p>
                    <p className="price"><strong>￥ 0.35元/GB/月</strong></p>
                    <Button type="primary" size="large">价格详情</Button>
                  </div>
                </div>
              </article>
            </Col>
          </Row>
        </div>

        <div className="wrap-feature">
          <Row className="row-title">
            <Col span={24}>
              <h5>产品功能</h5>
            </Col>
          </Row>
          <Row className="row-feature">
            <Col span={24}>
              <i className="icon icon-tanxing"></i>
              <p><strong>丰富的块存储产品类型</strong>提供SSD云盘、高效云盘、普通云盘、NVMe SSD本地盘、SATA HDD本地盘、SSD共享块存储、高效共享块存储等多种磁盘类型，满足不同业务场景需求</p>
            </Col>
          </Row>
          <Row className="row-feature">
            <Col span={24}>
              <i className="icon icon-tanxing"></i>
              <p><strong>高可靠的产品设计</strong>基于分布式多副本技术，结合云盘快照技术，满足数据持久化保存需求</p>
            </Col>
          </Row>
          <Row className="row-feature">
            <Col span={24}>
              <i className="icon icon-tanxing"></i>
              <p><strong>快速的业务部署和弹性能力</strong>利用快照和镜像实现快速的业务批量化部署，随时根据您的需要扩展块存储的容量</p>
            </Col>
          </Row>
          <Row className="row-feature">
            <Col span={24}>
              <i className="icon icon-tanxing"></i>
              <p><strong>高效简单的数据备份能力</strong>通过预先设置自动快照策略来实现自动快照功能，定期为您块存储上的业务数据做备份</p>
            </Col>
          </Row>
          <Row className="row-feature">
            <Col span={24}>
              <i className="icon icon-tanxing"></i>
              <p><strong>数据加密功能</strong>通过阿里云密钥管理服务（KMS）提供数据加密功能，采用256位强密码算法，满足行业合规要求</p>
            </Col>
          </Row>
        </div>
      </div>
    )
  }
}